<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom api</title>
</head>
<body>
    <!-- <div class="box" onclick="alert('hello')"> abc </div> -->
    <!-- <div class="box"> abc </div>
    <div di="id"> def </div>

    <h3>
        <span>
            <input type="text">
        </span>
    </h3> -->


    <!-- <img src="../image/tiger.jfif" alt="" title="大老虎"> -->

    <!-- <input type="text">
    <button>隐藏密码</button> -->


    <!-- <div id="one" style="font-size: 20px;"> 这是一个div, 点击之后字体放大</div> -->
    
    
    <!-- <div id="one" class="light" style="font-size: 20px; height: 500px;"> 这是一个div, 点击之后字体放大</div>

    <style>
        .light{
            /* 日间模式 */
            color: black;
            background-color: white;
        }

        .dark{
            /* 夜间模式 */
            color: white;
            background-color: black;
        } -->



        <!-- <div class="one">
            这是一个div
        </div> -->


        <!-- <ul>
            <li>11</li>
            <li>22</li>
            <li>33</li>
        </ul> -->

        
    </style>
    <script>

        


        // 新增, 删除元素
        // let ul = document.querySelector('ul');
        // for(let n=3; n<10; n++){
        //     let li = document.createElement('li');
        //     li.innerHTML = n + '' + n;
        //     ul.appendChild(li);

        // }

        // // 删除33
        // let toDelete = document.querySelectorAll('li')[2];
        // console.log(toDelete);

        // ul.removeChild(toDelete);


        

        // let input = document.createElement('input');
        // input.value = 'hello';

        // let div = document.querySelector('.one');
        // div.appendChild(input);




        // let div = document.querySelector('#one');
        // div.onclick = function(){
        //     // 点击, 切换夜间模式和日间模式
        //     if(div.className == 'dark'){
        //         div.className = 'light';
        //     }else{
        //         div.className = 'dark';
        //     }
        // }




        // let div = document.querySelector('#one');
        // div.onclick = function(){
        //     // 先获取当前的字体大小
        //     console.log(div.style.fontSize);
        //     // 使用parseInt转成整数
        //     let fontSize = parseInt(div.style.fontSize);
        //     fontSize += 10;
        //     // 设置字体大小, 不要忘记了px这个单位
        //     div.style.fontSize = fontSize + 'px';

        // }

        // let input = document.querySelector('input');
        // let button = document.querySelector('button');
        // button.onclick = function(){
        //     if(input.type == 'text'){
        //         iput.type = 'password';
        //         button.innerHTML = '显示密码';
        //     }else{
        //         input.type = "text";
        //         input.innerHTML = '隐藏密码';
        //     }

            // console.log(input.value);
            // console.log(input.innerHTML);

            // let valule = parseInt(input.value);
            // valule += 1;
            // input.value = valule;
        //}

        
        // let img = document.querySelector('img');
        // console.dir(img);
        // img.onclick = function(){
        //     console.log(img.src);
        //     console.log(img.title);
        //     img.src= '../panda.jpg';
        // }


        // let div = document.querySelector('.box');
        // // 鼠标按下
        // div.onclick = function(){
        //     console.log(div.innerHTML);
        //     div.innerHTML += 'a';
        // }


        
        // let elem1 = document.querySelector('.box');
        // // console.dir(elem1);
        // console.log(elem1);

        // let elem2 = document.querySelector('#id');
        // console.log(elem2);

        // let elem3 = document.querySelector('h3>span>input');
        // console.log(elem3);


    </script>
</body>
</html>